<script setup lang="ts">
import { ArrowRight, Expand, Grid } from '@element-plus/icons-vue'
// import { de } from 'element-plus/es/locales.mjs';
const data = {
    'name': 'John Brown',
    'email': '123@qq.com',
    'department': 'IT',
    'job': '艺术家',
    'gender': '男',
    'hiredate': '2023-03-01',
    'birthdate': '1999-01-01',
    'marriage': '已婚',
    'worktime': '2023-03-01',
}
const tableData1 = [
    {
        name: 'John Brown',
        dname: 'IT',
        starttime: '2023-03-01',
        endtime: '2023-03-01',
    },
    {
        name: 'John Brown',
        dname: 'IT',
        starttime: '2023-03-01',
        endtime: '2023-03-01',
    }
 ]
 
 const tableData2 = [
    {
        name: 'John Brown',
        jobname: '艺术家',
        starttime: '2023-03-01',
        endtime: '2023-03-01',
    },
    {
        name: 'John Brown',
        jobname: '艺术家',
        starttime: '2023-03-01',
        endtime: '2023-03-01',
    }
 ]
</script>
<template>
    <div class="head">查看个人信息</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/selfmsg' }">查看个人信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">
        <div class="info">
            <div id="aaa">
                <div class="l11"><el-icon>
                        <Expand />
                    </el-icon></div>
                <div class="l12">基础信息</div>
            </div>
            <div class="l21">
                <table>
                    <tr>
                        <td class="right">员工姓名:</td>
                        <td>{{ data.name }}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td rowspan="4"><img src="/img/1.jpg" alt="" style="width: 150px;"></td>
                    </tr>
                    <tr>
                        <td class="right">邮箱:</td>
                        <td>{{ data.email }}</td>
                    </tr>
                    <tr>
                        <td class="right">所属部门:</td>
                        <td>{{ data.department }}</td>
                    </tr>
                    <tr>
                        <td class="right">职位:</td>
                        <td>{{ data.job }}</td>
                    </tr>
                    <tr>
                        <td class="right">性别:</td>
                        <td>{{ data.gender }}</td>
                    </tr>
                    <tr>
                        <td class="right">入职日期:</td>
                        <td>{{ data.hiredate }}</td>
                    </tr>
                    <tr>
                        <td class="right">生日:</td>
                        <td>{{ data.birthdate }}</td>
                    </tr>
                    <tr>
                        <td class="right">婚姻状态:</td>
                        <td>{{ data.marriage }}</td>
                    </tr>
                    <tr>
                        <td class="right">初次参加工作时间:</td>
                        <td>{{ data.worktime }}</td>
                    </tr>

                </table>
            </div>
        </div>

    </div>
    <div class="body">
        <div class="info">
            <div id="aaa">
                <div class="l11"><el-icon>
                        <Grid />
                    </el-icon></div>
                <div class="l12">部门履历信息</div>
            </div>
            <div class="l21">
                <el-table :data="tableData1" style="width: 100%">
                    <el-table-column prop="name" label="员工姓名" width="180" />
                    <el-table-column prop="dname" label="部门名称" width="180" />
                    <el-table-column prop="starttime" label="开始日期" />
                    <el-table-column prop="endtime" label="结束日期" />
                </el-table>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="info">
            <div id="aaa">
                <div class="l11"><el-icon>
                        <Grid />
                    </el-icon></div>
                <div class="l12">职位履历信息</div>
            </div>
            <div class="l21">
                <el-table :data="tableData2" style="width: 100%">
                    <el-table-column prop="name" label="员工姓名" width="180" />
                    <el-table-column prop="jobname" label="职位名称" width="180" />
                    <el-table-column prop="starttime" label="开始日期" />
                    <el-table-column prop="endtime" label="结束日期" />
                </el-table>
            </div>
        </div>
    </div>

</template>

<style scoped>
table {
    padding-left: 40px;
}

table tr td {
    height: 40px;
    width: 150px;
}

.right {
    text-align: right;
}

#aaa {
    display: flex;
    height: 35px;
    margin-top: 20px;
}

.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    /* height: 100%; */
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.info {
    background-color: rgb(255, 255, 255);
    margin: 20px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.l11 {
    width: 2%;
    /* background-color: red; */
    /* display: inline; */
    padding-left: 8px;
    padding-top: 8px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-left: 10px;

}

.l12 {
    width: 98%;
    line-height: 35px;
    padding-left: 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;

    /* background-color: blue; */
    /* display: inline; */
}

.l21 {
    height: 100%;
    width: 100%;
    /* background-color: blueviolet; */
    padding-top: 20px;
    padding-left: 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

a {
    text-decoration: none;
    color: blue;
}
</style>